<template>
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-800">联系我们</h2>
                <div class="mt-2 w-24 h-1 bg-primary mx-auto"></div>
                <p class="mt-4 text-gray-600 max-w-2xl mx-auto">
                    如果您有任何问题或建议，欢迎随时与我们联系，我们将竭诚为您服务。
                </p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
                <div class="bg-white p-8 rounded-lg shadow-md">
                    <div
                        class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-map-marker-alt text-primary text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">地址信息</h3>
                    <p class="text-gray-600">北京市海淀区颐和园路123号温馨养老院</p>
                </div>
                <div class="bg-white p-8 rounded-lg shadow-md">
                    <div
                        class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-phone-alt text-primary text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">联系电话</h3>
                    <p class="text-gray-600">010-12345678</p>
                    <p class="text-gray-600">010-87654321</p>
                </div>
                <div class="bg-white p-8 rounded-lg shadow-md">
                    <div
                        class="w-20 h-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-envelope text-primary text-3xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">电子邮箱</h3>
                    <p class="text-gray-600">info@wenxinyanglaoyuan.com</p>
                    <p class="text-gray-600">service@wenxinyanglaoyuan.com</p>
                </div>
            </div>
            <div class="mt-12">
                <img
                    src="@/assets/images/map.png"
                    alt="地图"
                    class="rounded-lg shadow-lg w-full h-auto" />
            </div>
        </div>
    </section>
</template>

<script setup></script>

<style scoped></style>